<template>
	<div class="ll-page">
		<div class="banner-box">
			<div class="banner-box-left">
				<div v-if="positionTypeForm.positionType == 1" class="banner-box-left-material">
					<div>
						<img
							class="banner-box-left-shop-img"
							src="~@/assets/images/addBanner/img_banner_shop_applets.png"
						/>
					</div>
					<img
						v-if="positionTypeForm.content"
						class="banner-box-left-shop-banner"
						:src="positionTypeForm.content"
					/>
				</div>
				<div v-else class="banner-box-left-shop">
					<div>
						<img
							class="banner-box-left-material-img"
							src="~@/assets/images/addBanner/img_banner_scq_applets.png"
						/>
					</div>

					<img
						v-if="positionTypeForm.content"
						class="banner-box-left-material-banner"
						:src="positionTypeForm.content"
					/>
				</div>
			</div>
			<div class="banner-box-right">
				<div>
					<p class="banner-box-right-title">banner类型</p>
					<div class="banner-box-right-group">
						<div
							class="banner-box-right-group-item"
							:class="bannerType == 1 ? 'active' : ''"
							@click="bannerTypeChange(1)"
						>
							<n-radio :checked="bannerType == '1'" value="1" @change="() => bannerTypeChange(1)">
								产品banner
							</n-radio>
							<img
								v-if="bannerType == 1"
								src="~@/assets/images/addBanner/img_banner_cp_active.png"
							/>
							<img v-else src="~@/assets/images/addBanner/img_banner_cp_default.png" />
						</div>
						<div
							class="banner-box-right-group-item"
							:class="bannerType == 2 ? 'active' : ''"
							@click="bannerTypeChange(2)"
						>
							<n-radio :checked="bannerType == '2'" value="2" @change="() => bannerTypeChange(2)">
								自定义
							</n-radio>
							<img
								v-if="bannerType == 2"
								src="~@/assets/images/addBanner/img_banner_zdy_active.png"
							/>

							<img v-else src="~@/assets/images/addBanner/img_banner_zdy_default.png" />
						</div>
					</div>
				</div>
				<div v-if="bannerType === 1" class="banner-box-right-box">
					<productBanner
						@changPositionType="positionTypeChange"
						@changImage="positionTypeChangeImage"
					></productBanner>
				</div>

				<div v-else class="banner-box-right-box">
					<customBanner
						@changPositionType="positionTypeChange"
						@changImage="positionTypeChangeImage"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import customBanner from './components/customBanner.vue';
import productBanner from './components/productBanner.vue';
const bannerType = ref(1);
const positionTypeForm = reactive({
	positionType: 1, // 展示位置
	content: '' // 展示 图片
});
const bannerTypeChange = (index) => {
	bannerType.value = index;
	positionTypeForm.positionType = 1;
	positionTypeForm.content = '';
};
const positionTypeChange = (val) => {
	positionTypeForm.positionType = val;
};
const positionTypeChangeImage = (val) => {
	positionTypeForm.content = val;
};
</script>
<style lang="less" scoped>
.tips {
	margin-top: 8px;
	font-size: 12px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #f5894e;
}
.ll-page {
	height: 100%;
	flex-direction: column;
	justify-content: center;
	display: flex;
	background-color: #ffffff;
	padding: 0 40px;
	.banner-box {
		display: flex;
		&-left {
			width: 419px;
			height: 856px;
			position: relative;
			margin-right: 40px;
			flex-shrink: 0;
			&-material {
				&-img {
					width: 100%;
					height: 100%;
				}
				&-banner {
					position: absolute;
					top: 118px;
					left: 32px;
					width: 355px;
					height: 160px;
					border-radius: 12px;
				}
			}
			&-shop {
				&-img {
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					z-index: 1;
				}
				&-banner {
					position: relative;
					left: 22px;
					top: 21px;
					width: 375px;
					height: 261px;
					border-radius: 20px 20px 0px 0px;
				}
			}
		}
		&-right {
			margin-top: 21px;
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-right: 18%;
			&-title {
				font-size: 20px;
				font-weight: 600;
				color: #333333;
				margin-bottom: 16px;
			}
			&-group {
				width: 100%;
				display: flex;
				justify-content: space-between;
				margin-bottom: 15px;
				&-item {
					cursor: pointer;
					width: 48%;
					height: 100px;
					border-radius: 8px;
					border: 1px solid #f0f0f0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-left: 20px;
					font-size: 18px;
					font-weight: 500;
					color: #333333;
					background: #f5f5f5;

					img {
						height: 100px;
						width: 124px;
					}
					&.active {
						background: rgba(29, 111, 233, 0.06);
						border: 1px solid transparent;
					}
				}
			}
			.banner-box-right-box {
				display: flex;
				flex-direction: column;
				flex: 1;
				margin-bottom: 21px;
			}
		}
	}
}
::v-deep(.n-upload .n-upload-file-list.n-upload-file-list--grid) {
	display: inline-block;
}
::v-deep(.n-upload-dragger) {
	background-color: #f0f0f0;
}
::v-deep(.n-upload-trigger.n-upload-trigger--image-card) {
	width: 120px;
	height: 80px;
}
::v-deep(.n-upload-file) {
	float: left;
	margin-right: 10px;
	width: 120px;
	height: 80px;
}
::v-deep(.n-upload .n-upload-file-list .n-upload-file.n-upload-file--image-card-type) {
	width: 120px;
	height: 80px;
}
::v-deep(.n-upload__trigger) {
	float: left;
	width: 120px;
	height: 80px;
}
</style>
